<template>
  <div class="detailNav">
    <NavBar>
      <div slot="left" class="left" @click="backclick">&lt;</div>
      <div slot="center" class="title">
        <div v-for="(item,index) in titles" id="title-item" :class="{active:index===currentindex}"
        @click="titleclick(index)">{{item}}</div>
      </div>
    </NavBar>
  </div>
</template>
<script>
  import NavBar from 'components/common/navbar/Navbar'; 
  export default{
    name:"detailNavbar",
    components:{
      NavBar
    },
    data(){
      return{
        titles:['商品','参数','评论','推荐'],
        currentindex:0
      }
    },
    methods:{
      titleclick(index){
        this.currentindex=index
        this.$emit("titleclick",index)
      },
      backclick(){
        this.$router.go(-1)
      }
    }

  }
</script>
<style scoped>
  .title{
    display: flex;
  }
  #title-item{
    flex: 1;
    font-size: 14px;
  }
  .active{
    color:var(--color-high-text);
  }
  .left{
    font-size: 30px;
    text-align: center;
  }
</style>